<template>
  <div class='container'>
    <el-card class="box-card">
      <span>杨会可</span>
      <!-- 顶部面包屑 -->
      <el-breadcrumb v-if="$route.query.id" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ subjectName }}</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 搜索添加表单 -->
      <el-form :inline="true">
        <el-form-item label="标签名称" style="margin-right: 50px">
          <el-input v-model.trim="table.tagName" size="small" ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select size="small" v-model="table.state" placeholder="请选择">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
         <el-button size="small" @click="onClear">清除</el-button>
         <el-button type="primary" size="small" @click="onSearch">搜索</el-button>
        </el-form-item>
        <el-form-item style="float: right" >
          <el-button type="text" icon="el-icon-back" v-if="$route.query.id" @click="$router.back()" >返回学科</el-button>
          <el-button type="success" icon="el-icon-edit" size="small" @click="onEdit">新增目录</el-button>
        </el-form-item>
      </el-form>

      <!-- 提示信息 -->
      <el-alert
        :title="'数据一共 ' + total + ' 条'"
        type="info"
        show-icon
        :closable="false">
      </el-alert>

      <!-- table表格 -->
      <el-table
        :data="directoryList"
        style="width: 100%">

        <el-table-column
          type="index"
          label="序号"
          width="50">
        </el-table-column>

        <el-table-column
          prop="subjectName"
          label="所属学科"
          >
        </el-table-column>

        <el-table-column
          prop="tagName"
          label="标签名称">
        </el-table-column>

        <el-table-column
          prop="username"
          label="创建者"
          width="180">
        </el-table-column>

        <el-table-column
          label="创建日期">
          <template slot-scope="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>

        <el-table-column
          label="状态">
        <template slot-scope="{ row }">
          {{ row.state === 0 ? '已禁用' : '已启用' }}
        </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="250">
          <template slot-scope="{row}">
            <el-button type="text" @click="onState(row)" >{{row.state === 0 ? '启用' : '禁用'}}</el-button>
            <el-button type="text" :disabled='!!row.state' @click="onEdit(row)">修改</el-button>
            <el-button type="text" :disabled='!!row.state' @click="onDel(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="table.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total">
      </el-pagination>

      <!-- 新增标签框 -->
      <el-dialog
        :title="title"
        :visible.sync="addTagsDialog"
        width="30%"
        @close="onClose"
        >
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="所属学科" v-if="!$route.query.id">
            <el-select class="setWidth" size="small" v-model="form.subjectID" placeholder="请选择">
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签名称" prop="tagName">
            <el-input size="small" placeholder="请输入标签名称" v-model.trim="form.tagName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="onClose">取 消</el-button>
          <el-button type="primary" @click="onSave">确 认</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { detail, simple } from '@/api/hmmm/subjects'
import { list, changeState, remove, update, add } from '@/api/hmmm/tags'
export default {
  name: 'aaa',
  data () {
    return {
      // 获取列表数据
      table: {
        page: 1,
        pagesize: 10,
        subjectID: '',
        tagName: ''
        // state: ''
      },
      subjectName: '', // 面包屑动态数据
      total: 0,
      directoryList: [], // 目录列表
      currentPage: 1,
      // 修改状态
      directory: {
        id: '',
        state: ''
      },
      // 弹出框表单数据
      form: {
        subjectID: '',
        tagName: '',
        subjectName: ''
      },
      subjectList: [],
      addTagsDialog: false,
      title: '',
      // 校验规则
      rules: {
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'change' }
        ]
      }
    }
  },

  created () {
    this.form.subjectID = this.$route.query.id
    this.subjectName = this.$route.query.name
    this.setID()
    this.getDirectoryList()
  },

  methods: {
    // 点击清除
    onClear () {
      this.table = {
        page: 1,
        pagesize: 10,
        subjectID: '',
        tagName: ''
      }
      this.setID()
      this.getDirectoryList()
    },
    async setID () {
      const { data } = await detail({ id: this.form.subjectID })
      // 记录当前学科id
      this.table.subjectID = data.id
      const res = await list(this.table)
      this.directoryList = res.data.items
      this.total = res.data.counts
    },
    // 获取目录数据
    async getDirectoryList () {
      const res = await list(this.table)
      this.directoryList = res.data.items
      this.total = res.data.counts
    },
    // 每页显示多少条发生变化时
    async handleSizeChange (val) {
      this.table.pagesize = val
      this.getDirectoryList()
    },
    // 点击页码值发生变化时
    async handleCurrentChange (val) {
      this.table.page = val
      this.getDirectoryList()
    },
    // 点击修改状态
    async onState (row) {
      if (row.state === 0) {
        row.state = 1
      } else {
        row.state = 0
      }
      await changeState(row)
      this.setID()
      this.getDirectoryList()
    },
    // 删除目录
    onDel (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        const totalPage = Math.ceil((this.total - 1) / this.table.pagesize)
        const currentPage = this.table.page > totalPage ? totalPage : this.table.page
        this.table.page = this.table.page < 1 ? 1 : currentPage
        this.getDirectoryList()
        this.$message.success('删除成功! ')
      }).catch(() => {
        this.$message('已取消删除')
      })
    },
    // 弹框关闭
    onClose () {
      this.addTagsDialog = false
      this.$refs.form.resetFields()
      this.form = {
        subjectID: '',
        tagName: '',
        subjectName: ''
      }
      this.subjectList = []
    },
    // 点击搜索
    async onSearch () {
      this.table.page = 1
      this.setID()
    },
    // 点击修改学科
    async onEdit (row) {
      if (!row.id) {
        this.title = '新增标签'
        if (this.$route.query.id) {
          this.form.subjectID = this.$route.query.id - 0
        }
      } else {
        this.title = '修改标签'
        this.form.id = row.id
        this.form.subjectID = row.subjectID
        this.form.tagName = row.tagName
        // this.form.subjectID = this.$route.query.id - 0
      }
      setTimeout(() => {
        this.addTagsDialog = true
      }, 10)

      if (!this.$route.query.id) {
        this.table.pagesize = this.total
        // 获取简单列表
        const res = await simple(this.table)
        // 下拉列表数据
        this.subjectList = res.data
      }
    },
    // 点击确认
    async onSave () {
      await this.$refs.form.validate()
      if (this.title === '新增标签') {
        await add({ subjectID: this.form.subjectID, tagName: this.form.tagName })
      } else {
        await update(this.form)
      }
      this.addTagsDialog = false
      this.$message.success('操作成功')
      this.table.pagesize = 10
      this.getDirectoryList()
    }
  }
}
</script>

<style scoped lang='less'>
.container {
   padding: 10px;
  .el-form {
    padding: 0 10px;
    .el-form-item {
      margin-bottom: 15px;
    }
  }
  .el-breadcrumb {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }

  .el-pagination {
    margin: 20px 0;
    float: right;
  }
  .setWidth {
    width: 100%;
  }
}
</style>
